<template>
	<div>
		<div class="top">
			<el-button type="primary" @click="dialogVisible = true">添加</el-button>
			<el-input placeholder="请输入检索内容">
				<template slot="append">
					<el-button @click='search'>搜索</el-button>
				</template>
			</el-input>
		</div>
		<el-table :data="productList" style="width: 100%" height="520">
			<el-table-column prop="id" label="编号" width="100">
			</el-table-column>
			<el-table-column prop="productName" label="	产品名称">
			</el-table-column>
			<el-table-column prop="unit" label="规格">
				<template v-slot="scope">
					<el-tag>{{scope.row.unit}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="unitPrice" label="单价">
			</el-table-column>
			<el-table-column prop="nums" label="个数">
			</el-table-column>
			<el-table-column prop="totalPrice" label="总价">
			</el-table-column>
			<el-table-column prop="cid" label="分类ID">
			</el-table-column>
			<el-table-column prop="dateTime" label="更新日期" width="250">
			</el-table-column>

			<el-table-column prop="" label="操作" width="180">
				<template slot-scope='scope'>
					<el-button type="primary" icon="el-icon-edit" @click="showEdit(scope.row)"></el-button>
					<template>
						<el-popconfirm title="确定永久删除？" @confirm="del(scope.row.id)">
							<el-button type="primary" icon="el-icon-delete" slot="reference"></el-button>
						</el-popconfirm>
					</template>
					<!-- <el-button type="primary" icon="el-icon-delete" @click="del(scope.row.id)"></el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<!-- current-page当前页数  -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page"
			:page-sizes="page.sizes" :page-size="page.rows" layout="total, sizes, prev, pager, next, jumper"
			:total="page.totle">
		</el-pagination>
		<!-- 修改 -->
		<!-- 修改分类 -->
		<el-dialog title="修改产品" :visible.sync="editorVisible" width="30%">
			<el-form label-width="80px" :model="addProduct">
				<el-form-item label="产品名">
					<el-input v-model="addProduct.ProductName" placeholder="请输入产品名"></el-input>
				</el-form-item>
				<el-form-item label="规格">
					<el-input v-model="addProduct.Unit" placeholder="请输入规格"></el-input>
				</el-form-item>
				<el-form-item label="单价">
					<el-input v-model="addProduct.UnitPrice" placeholder="请输入单价"></el-input>
				</el-form-item>
				<el-form-item label="个数">
					<el-input v-model="addProduct.Nums" placeholder="请输入个数"></el-input>
				</el-form-item>
				<el-form-item label="总价">
					<el-input v-model="addProduct.TotalPrice" placeholder="请输入总价"></el-input>
				</el-form-item>
				<el-form-item label="分类ID">
					<el-input v-model="addProduct.Cid" placeholder="请输入分类ID"></el-input>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editorVisible = false">取 消</el-button>
				<el-button type="primary" @click="editor">提 交</el-button>
			</span>
		</el-dialog>
		<!-- 添加 -->
		<el-dialog title="添加产品" :visible.sync="dialogVisible" width="30%">
			<el-form label-width="80px" :model="addProduct">
				<el-form-item label="产品名">
					<el-input v-model="addProduct.ProductName" placeholder="请输入产品名"></el-input>
				</el-form-item>
				<el-form-item label="单位">
					<el-input v-model="addProduct.Unit" placeholder="请输入单位"></el-input>
				</el-form-item>
				<el-form-item label="单价">
					<!-- <el-input v-model="addProduct.UnitPrice" placeholder="请输入单价"></el-input> -->
					<template>
						<el-input-number v-model="addProduct.UnitPrice" controls-position="right" :min="1">
						</el-input-number>
					</template>
				</el-form-item>
				<el-form-item label="个数">
					<!-- <el-input v-model="addProduct.Nums" placeholder="请输入个数"></el-input> -->
					<template>
						<el-input-number v-model="addProduct.Nums" controls-position="right" :min="1">
						</el-input-number>
					</template>
				</el-form-item>
				</el-form-item>
				<el-form-item label="总价">
					<el-input disabled v-model="addProduct.TotalPrice"  :placeholder="totalPrice"></el-input>
				</el-form-item>
				<el-form-item label="分类ID">
					<el-input v-model="addProduct.Cid" placeholder="请输入分类ID"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="add">添 加</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	var _this = this;
	export default {
		name: '',
		data() {
			return {
				// 修改
				editorVisible: false,
				// 添加
				dialogVisible: false,
				productList: [],
				page: {
					currentPage: 1,
					totle: 0,
					sizes: [4, 5, 6, 7, 14],
					rows: 7,
					page: 1
				},
				// 添加
				addProduct: {
					ProductName: "",
					Unit: "",
					UnitPrice: 0,
					Nums: 0,
					TotalPrice: 0,
					Cid: '',
				},
			}
		},
		created() {
			_this = this;
			_this.getProductList()
			console.log(_this.addProduct.TotalPrice);
		},
		// 计算总价
		computed:{
			totalPrice: function(){
				this.addProduct.TotalPrice=(this.addProduct.Nums*this.addProduct.UnitPrice).toFixed(2)
				return(_this.addProduct.Nums*_this.addProduct.UnitPrice).toFixed(2)
			}
		},
		mounted() {
				// console.log(this.addProduct.TotalPrice);
		},
		methods: {
			// 分页
			handleSizeChange(val) {
				// 通过改变页面 每页显示几条 得到数据 重新渲染 
				console.log(`每页 ${val} 条`);
				// console.log(val)
				_this.page.rows = val
				_this.getProductList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				_this.page.page = val
				_this.getProductList()
			},
			search() {
				console.log(product)
			},
			getProductList() {
				// console.log(123)
				_this.$axios.get(`/api/v1/productList?page=${_this.page.page}&pageSize=${_this.page.rows}`, {
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
				}).then(function(res) {
					console.log(res)
					if (res.data.code == 200) {
						_this.productList = res.data.data.productList
						_this.page.totle = res.data.data.count
					}
				})
				// _this.$axios({
				// 	// url: "/api/v1/productList?page=1&pageSize=10",
				// 	url: `/api/v1/productList?page=${_this.page.page}&pageSize=${_this.page.rows}`,
				// 	headers: {
				// 		token: JSON.parse(sessionStorage.getItem("member")).token
				// 	},
				// 	method: 'GET',
				// }).then(function(res) {
				// 	console.log(res)
				// 	if (res.data.code == 200) {
				// 		_this.productList = res.data.data.productList
				// 		_this.page.totle = res.data.data.count
				// 	}
				// })
			},
			// 添加
			add() {
				// console.log(456)
				_this.$axios({
					url: '/api/v1/productAdd',
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					method: "POST",
					data: {
						Info: {
							"ProductName": _this.addProduct.ProductName,
							"Unit": _this.addProduct.Unit,
							"UnitPrice": parseInt(_this.addProduct.UnitPrice),
							"Nums": parseInt(_this.addProduct.Nums),
							"TotalPrice": parseInt(_this.addProduct.TotalPrice),
							"Cid": parseInt(_this.addProduct.Cid)
						}
					}
				}).then(function(res) {
					console.log(res)
					if (res.data.code == 200) {
						_this.$message({
							message: "添加成功",
							type: "success",
							duration: 800,
							onClose: function() {
								_this.dialogVisible = false
								_this.getProductList()
							}
						})
					} else {
						_this.$message({
							message: "添加失败",
							type: "error",
							duration: 800
						})
					}
				})
			},
			// 删除
			del(id) {
				console.log(id)
				_this.$axios.delete(`/api/v1/productDel?id=${id}`, {
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					}
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						_this.$message.success("删除成功")
						_this.getProductList()
					} else {
						_this.$message.error("删除失败")
					}
				})
			},
			// 修改框
			showEdit(obj) {
				console.log(obj)
				this.editorVisible = true
				this.addProduct.ProductName = obj.productName
				this.addProduct.Unit = obj.unit
				this.addProduct.UnitPrice = obj.unitPrice
				this.addProduct.Nums = obj.nums
				this.addProduct.TotalPrice = obj.totalPrice
				this.addProduct.Cid = obj.cid
			},
			// 修改
			editor() {
				console.log(132)
				_this.$axios({
					url: "/api/v1/productUpdate",
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					method: "patch",
					data: {
						"ProductName": _this.addProduct.ProductName,
						"Unit": _this.addProduct.Unit,
						"UnitPrice": parseInt(_this.addProduct.UnitPrice),
						"Nums": parseInt(_this.addProduct.Nums),
						"TotalPrice": parseInt(_this.addProduct.TotalPrice),
						"Cid": parseInt(_this.addProduct.Cid),
					}
				}).then(res => {
					if (res.data.code == 200) {
						_this.$message({
							type: "success",
							message: "修改成功",
							onClose: function() {
								_this.getProductList()
								_this.editorVisible = false
							}
						})
					} else {
						_this.$message.error("修改失败")
					}
				})
				// _this.$axios.patch("/api/v1/productUpdate",{
				// 	headers: {
				// 		token: JSON.parse(sessionStorage.getItem("member")).token
				// 	},
				// 	data:{
				// 		"ProductName": _this.addProduct.ProductName,
				// 		"Unit": _this.addProduct.Unit,
				// 		"UnitPrice": parseInt(_this.addProduct.UnitPrice),
				// 		"Nums": parseInt(_this.addProduct.Nums),
				// 		"TotalPrice":parseInt(_this.addProduct.TotalPrice),
				// 		"Cid": parseInt(_this.addProduct.Cid),
				// 	}
				// }).then(res=>{
				// 	if(res.data.code==200){
				// 		_this.$message.success("修改成功")
				// 	}else{
				// 		_this.$message.error("修改失败")
				// 	}
				// })
			}
		}
	}
</script>

<style scoped="scoped">
	.top {
		display: flex;
		background: #fff;
		padding: 10px 10px;
		box-sizing: border-box;
		/* border-bottom: 1px solid #ddd; */
		/* background-color: #f8f8f9; */

	}

	.top .el-input {
		width: 250px;
		margin: 0 20px;
		/* background-color: #f8f8f9; */
	}

	.el-pagination {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>
<style>

	.el-popover__reference-wrapper {
		margin-left: 10px;
	}
</style>
